<template>
  <div class="message-dialog" v-show="messageDialog">
    <div class="message-box">
      <div class="message-title">
        <span class="message-result">结果</span><span class="el-icon-close message-close" @click="messageClose"></span>
      </div>
      <div class="message-content">
        <svg class="icon message-gold" aria-hidden="true">
          <use xlink:href="#icon-jinbi"></use>
        </svg>
        <span class="message-money">截止到目前，平台导入总金额为：{{goldNum}}元</span>
      </div>
      <el-button type="primary" size="mini" class="message-btn" @click="messageClose">确定</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: {
      goldNum: {
        type: Number,
        default: 0.00
      },
      messageVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        messageDialog: false
      }
    },
    mounted() {
      this.messageDialog = this.messageVisible;
    },
    methods: {
      messageClose() {
        this.messageDialog = false;
        this.$emit('messageClose');
      }
    },
    watch: {
      messageVisible(newVal) {
        this.messageDialog = newVal;
      },
      messageDialog(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .message-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2005;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    .message-box {
      width: 420px;
      height: 136px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      .message-title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 45px;
        justify-content: space-between;
        .message-result {
          margin-left: 16px;
          font-size: 16px;
          font-weight: bold;
          color: rgba(61, 68, 76, 1);
        }
        .message-close {
          margin-right: 16px;
        }
      }
      .message-content {
        display: flex;
        align-items: center;
        margin-top: 15px;
        margin-bottom: 20px;
        .message-gold {
          margin-left: 16px;
          margin-right: 16px;
          width: 20px;
          height: 20px;
        }
        .message-money {
          font-size: 14px;
          color: rgba(96, 98, 102, 1);
        }
      }
      .message-btn {
        display: flex;
        margin-left: auto;
        margin-right: 16px;
      }
    }
  }
</style>
